import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:wanxiang_app/widgets/myappbar.dart';

import 'package:responsive_grid_list/responsive_grid_list.dart';

import '../../utils/common.dart';
import '../../utils/tabChangeEvent.dart';
import '../../utils/toast_util.dart';
import '../../widgets/pinyin.dart';
import '../home/search.dart';
import '../home/searchResult.dart';
import '../login/login.dart';
import '../login/login_code.dart';

class SellChoosePage extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<SellChoosePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: _content(),
    );
  }

  Widget _top() {
    return Container(
        margin: EdgeInsets.only(left: 16.w, right: 25.w),
        height: 32.h,
        alignment: Alignment.topCenter,
        child: Row(
          children: [
            Column(
              children: [
                Image.asset(
                  'assets/images/home_logo.png',
                  width: 50.w,
                  height: 19.h,
                ),
                Image.asset(
                  'assets/images/home_sologan.png',
                  width: 47.w,
                  height: 6.h,
                ),
              ],
            ),
            SizedBox(
              width: 17.w,
            ),
            Expanded(
                flex: 1,
                child: InkWell(
                    onTap: () {
                      Get.to(() => SearchPage(), preventDuplicates: false);
                    },
                    child: Container(
                      height: 32.h,
                      decoration: BoxDecoration(
                          color: Color(0xFFF5F5F5),
                          borderRadius: BorderRadius.circular(17.r)),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          SizedBox(
                            width: 18.w,
                          ),
                          Image.asset(
                            'assets/images/home_search.png',
                            width: 14.w,
                            height: 14.h,
                          ),
                          SizedBox(
                            width: 8.w,
                          ),
                          Text(
                            '请输入游戏名称',
                            style: TextStyle(
                                color: Color(0xFF8B8B8B), fontSize: 13.sp),
                          )
                        ],
                      ),
                    ))),
            SizedBox(
              width: 21.w,
            ),
            InkWell(
              onTap: () {
                print('InkWellInkWellInkWellInkWell');
                bool islogin = Common.checkLogin();
                if (islogin) {
                  tabbarEventBus.fire(TabChangedEvent(400));
                } else {
                  ToastUtil.show("请先登录");
                  Get.to(() => LoginCodePage(), preventDuplicates: false);
                }
              },
              child: Image.asset(
                'assets/images/home_service.png',
                width: 24.w,
                height: 22.h,
              ),
            )
          ],
        ));
  }

  Widget _content() {
    return Container(
      child: Stack(
        children: [
          Container(
              child: Column(
            children: [
              SizedBox(
                height: MediaQueryData.fromWindow(window).padding.top + 21.h,
              ),
              _top(),
              _gameNamesList(),
              Container(
                  margin: EdgeInsets.only(right: 30.w),
                  height: MediaQuery.of(context).size.height -
                      130.h -
                      19.h -
                      MediaQueryData.fromWindow(window).padding.top -
                      21.h,
                  child: _hotList())
            ],
          )),
          IndexBar(
              key: ValueKey('pinyin2'),
              top: 140.h,
              indexBarCallBack: (content) {})
        ],
      ),
    );
  }

  Widget _gameNamesList() {
    return Container(
        margin: EdgeInsets.fromLTRB(16.w, 16.h, 16.w, 0),
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: _gameNameListItems(),
          ),
        ));
  }

  List<Widget> _gameNameListItems() {
    List<Widget> items = [];
    items.add(_gameNameItems());
    items.add(_gameNameItems());
    items.add(_gameNameItems());
    items.add(_gameNameItems());
    items.add(_gameNameItems());
    items.add(_gameNameItems());
    items.add(_gameNameItems());
    return items;
  }

  Widget _gameNameItems() {
    return Container(
      height: 34.h,
      padding: EdgeInsets.fromLTRB(12.w, 4.h, 12.w, 4.h),
      margin: EdgeInsets.only(right: 10.w),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10.r),
          border: Border.all(
            color: Color(0xFFF43F50), //边框颜色
            width: 1.w, //宽度
          ),
          color: Colors.white),
      child: Text(
        '端游',
        style: TextStyle(color: Color(0xFF333333), fontSize: 14.sp),
      ),
    );
  }

  final List data = List.generate(30, (i) => Color(0xFFFF00FF - 2 * i));

  Widget _hotList() {
    return Scaffold(
        backgroundColor: Colors.white,
        body: ResponsiveGridList(
          horizontalGridSpacing: 11.w,
          // Horizontal space between grid items
          verticalGridSpacing: 13.h,
          // Vertical space between grid items
          horizontalGridMargin: 16.w,
          // Horizontal space around the grid
          verticalGridMargin: 0,
          // Vertical space around the grid
          minItemWidth: 42.w,
          // The minimum item width (can be smaller, if the layout constraints are smaller)
          listViewBuilderOptions: ListViewBuilderOptions(),
          // Options that are getting passed to the ListView.builder() function
          children: hots(), // The list of widgets in the list
        ));
    ;
  }

  List<Widget> hots() {
    List<Widget> lists = [];
    for (int i = 0; i < data.length; i++) {
      lists.add(_hotItem(data[i], i));
    }
    return lists;
  }

  Widget _hotItem(color, index) {
    return InkWell(
        onTap: () {
          // Get.to(()=>SearchResultPage(true,true));
        },
        child: Container(
            child: Column(
          children: [
            Container(
              width: 52.w,
              height: 52.h,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(16.r), color: color),
              alignment: Alignment.center,
            ),
            SizedBox(
              height: 9.h,
            ),
            Flexible(
                child: Text(
              index.toString(),
              style: TextStyle(
                color: Color(0xFF333333),
                fontSize: 12.sp,
              ),
            ))
          ],
        )));
  }
}
